<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
    <script>
        //ajax动态获取所有User Item
        $(document).ready(function () {
            $.ajax({
                timeout: 3000,
                url: '../addUsername',
                dataType: 'json',
                async: false,
                success: function (data) {
                    console.log(data)
                    for (var i = 0; i < data.length; i++) {
                        $("#s1").append("<option>" + data[i].userName + "</option>");
                        $("#i2").append("<option  readonly>" + data[i].carNum + "</option>");
                        $("#i3").append("<option>" + data[i].tel + "</option>");
                    }
                }
            });

            $.ajax({
                timeout: 3000,
                dataType: 'json',
                url: "../addItemdelict",
                async: false,
                success: function (data) {
                    console.log(data)
                    for (var i = 0; i < data.length; i++) {
                        $("#s2").append("<option>" + data[i].delict + "</option>");
                        $("#i4").append("<option>" + data[i].itemId + "</option>");
                        $("#i5").append("<option>" + data[i].fine + "</option>");
                        $("#i6").append("<option>" + data[i].r_score + "</option>");
                    }

                }
            });


        });
       //二级联动 用户
        function show(data) {
            var selectedIndex = data.selectedIndex;

            let e = document.getElementById("i2").options;
            let e1 = document.getElementById("i3").options;
            e[selectedIndex].selected = true;
            e1[selectedIndex].selected = true;

        }
        //二级联动 违法
        function shows(data) {
            var selectedIndex = data.selectedIndex;

            let e = document.getElementById("i4").options;
            let e1 = document.getElementById("i5").options;
            let e2 = document.getElementById("i6").options;
            e[selectedIndex].selected = true;
            e1[selectedIndex].selected = true;
            e2[selectedIndex].selected = true;

        }


    </script>
    <title>添加记录</title>
</head>
<body>
<h1 align="center">添加违法记录</h1>
<div>
    <form th:action="addRecords" method="post">
        <div>
            <label for="i1" class="col-sm-2 control-label">违法时间</label>
            <div>
                <input class="form-control" id="i1" name="itemDate" th:value="${itemDate}" type="text" readonly>
            </div>
        </div>
        <div>
            <label for="s1" class="col-sm-2 control-label">车主姓名</label>
            <div>
                <select class="form-control" id="s1" th:name="username"  onchange="show(this)">
                    <option>请选择姓名</option>
                </select>
            </div>
        </div>

        <div>
            <label for="i2" class="col-sm-2 control-label">车牌号</label>
            <div>
                <select class="form-control" attrappend=none name="i2" id="i2" disabled>
                    <option>请选择车牌</option>

                </select>

            </div>
        </div>
        <div>
            <label for="i3" class="col-sm-2 control-label">手机号码</label>
            <div>
                <select class="form-control"attrappend=none name="i3" id="i3"disabled>
                    <option >请选择手机</option>

                </select>
            </div>
        </div>


        <div>
            <label for="s2" class="col-sm-2 control-label">违法行为</label>
            <div>
                <select class="form-control" id="s2" th:name="delict" onchange="shows(this)">
                    <option value="">请选择违法类型</option>
                </select>
            </div>
        </div>
        <div>
            <label for="i4" class="col-sm-2 control-label">违法代码</label>
            <div>
                <select class="form-control" attrappend=none  id="i4" disabled>
                    <option value="">违法代码</option>

                </select>

            </div>
        </div>
        <div>
            <label for="i5" class="col-sm-2 control-label">罚款</label>
            <div>
                <select class="form-control" attrappend=none name="i5" id="i5" disabled>
                    <option value="">罚款</option>

                </select>
            </div>
        </div>
        <div>
            <label for="i6" class="col-sm-2 control-label">记分</label>
            <div>
                <select class="form-control" attrappend=none name="i6" id="i6" disabled>
                    <option value="">记分</option>

                </select>
            </div>
        </div>

        <div>
            <label for="i7" class="col-sm-2 control-label">违法地点</label>
            <div>
                <input type="text" id="i7" name="address" class="form-control">
            </div>
        </div>

        <div>
            <label for="i8" class="col-sm-2 control-label">状态</label>
            <div>
                <input class="form-control" id="i8" th:value="${staus}" type="text" readonly>
            </div>
        </div>

        <button  style="  margin-left: 700px" type="submit" class="btn btn-primary btn-lg">保存</button>


    </form>

</div>


</body>
</html>